<script setup>
const props = defineProps({
  formData: {
    type: Object,
    default: () => ({}),
  },
  formRules: {
    type: Object,
    default: () => ({}),
  },
});

// 添加行
const addRow = () => {
  props.formData.options.push({
    name: "",
    description: "",
    img_url: "",
  });
};

// 删除行
const delEdit = (index) => {
  console.log(index);
  props.formData.options.splice(index, 1);
};
</script>
<template>
  <el-table :data="formData.options" border stripe>
    <el-table-column label="选项名称" align="center">
      <template #default="{ row, $index }">
        <el-form-item :prop="`options.${$index}.name`">
          <el-input v-model="row.name" placeholder="请输入" />
        </el-form-item>
      </template>
    </el-table-column>
    <el-table-column label="选项描述" align="center">
      <template #default="{ row, $index }">
        <el-form-item :prop="`options.${$index}.description`">
          <el-input
            v-model="row.description"
            type="textarea"
            placeholder="请输入"
          />
        </el-form-item>
      </template>
    </el-table-column>
    <el-table-column label="图片地址" align="center">
      <template #default="{ row, $index }">
        <el-form-item :prop="`options.${$index}.img_url`">
          <ImageUpload
            v-model="row.img_url"
            :type="'ticket'"
            :isShowTip="false"
            :limit="1"
          ></ImageUpload>
        </el-form-item>
      </template>
    </el-table-column>
    <el-table-column align="center" fixed="right" label="操作" width="100px">
      <template #default="{ row, $index }">
        <el-button type="text" @click="delEdit($index)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <div class="lineBox" @click="addRow">
    <el-button type="text" icon="Plus">新增选项</el-button>
  </div>
</template>

<style lang="scss" scoped>
.lineBox {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 5px;
  width: 100%;
  border: 1px dashed #409eff;
  cursor: pointer;
}
</style>
